<template>
  <div class="realphoto">
    <div class="tit">
      <span>实时相机</span>
    </div>
    <el-row :gutter="20">
      <el-col :span="3">
        <el-select v-model="cardNum" clearable filterable @change="changecondition" placeholder="请选择相机编号">
          <el-option
            v-for="item in cardNumArr"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>

      <el-col :span="3">
        <el-select v-model="wanggeNum" clearable filterable @change="changecondition" placeholder="请选择网格编号">
          <el-option
            v-for="item in gridArr"
            :key="item"
            :label="item"
            :value="item">
          </el-option>
        </el-select>
      </el-col>
    </el-row>
    <div class="pifcr clearfix">
      <div class="pic" v-for="jd in pageList">
        <div class="im">
          <img :src="issurface(jd.surfacePlotUrl)" alt="">
          <div class="mes">
            <span>&nbsp;&nbsp;文件数量：{{jd.fileNum}}</span>
          </div>
        </div>
        <div class="txt">
          <span>相机编号：{{jd.imei}}</span>&nbsp;&nbsp;
          <span>网格编号：{{jd.oneKmGridNum}}</span>
          <br/>
          <span>布设时间：{{jd.strLayTime}}</span>
        </div>
        <div class="btn">
            <span class="s_bt"
                  @click="open_upload(jd)"
                  style="background-color: #00CC46;" v-if="abilityList.indexOf('edit')!=-1">上传</span>&nbsp;
          <span class="s_bt"
                @click="gogrouping(jd)"
                style="background-color: #00CC46;">鉴定</span>&nbsp;
        </div>
      </div>
    </div>

    <!--分页 B-->
    <div class="pagecr">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size=8
        layout="total,prev, pager, next, jumper"
        :total=totalNumber>
      </el-pagination>
    </div>
    <!--分页 E-->


    <!--上传 B-->
    <div class="uploadBox" v-if="uploadBox">
      <div>
        <div class="photoList">
          <el-upload
            :data="upd.data"
            :action="upd.action"
            list-type="picture-card"
            accept="video/*||image/*"
            :auto-upload="false"
            ref="upload"
            multiple
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog>
        </div>

        <div class="start">
          <el-button size="mini" type="success" @click="submitUpload">开始上传</el-button>
          <el-button size="mini" type="primary" @click="closeuploadBox">结束上传</el-button>
        </div>

      </div>
    </div>
    <!--上传 E-->

  </div>
</template>
<script>
  import api from '../utils/api'
  import http from '../utils/http'

  export default {
    data() {
      return {
        areaId: "",
        cardNum: "",
        cardNumArr: [],
        gridArr: [],
        wanggeNum: "",
        pageList: [],
        pageSize: 8,
        pageNum: 1,
        totalNumber: 0,
        uploadBox: false,
        dialogImageUrl: '',
        dialogVisible: false,
        upd: {
          action: api.infrared.relupload,
          data: {
            cameraEnvirId: "",
            areaId: ""
          }
        },
        abilityList: []
      }
    },
    mounted() {

    },
    created() {
      this.areaId = sessionStorage.getItem('areaId');
      this.abilityList = sessionStorage.getItem('abilityList')
      this.getImei();
      this.getCad();
      this.getcameraPage();
    },
    methods: {
      open_upload(jd) {
        this.upd.data.cameraEnvirId = jd.id;
        this.upd.data.areaId = this.areaId;
        this.uploadBox = true;
      },
      submitUpload() {
        this.$refs.upload.submit();
      },
      closeuploadBox() {
        this.getcameraPage();
        this.uploadBox = false;
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
        console.log("删除");
      },
      getImei() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.authenticate, {
            areaId: vm.areaId,
            type: "红外相机"
          })
          if (res.data.code == '200') {
            vm.cardNumArr = res.data.data;
          }
        })()
      },
      getCad() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.getAreaGrid, {
            areaId: vm.areaId
          })
          vm.gridArr = res.data;
        })()
      },
      changecondition() {
        this.pageNum = 1;
        this.getcameraPage();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getcameraPage();
      },
      gogrouping(n) {
        if (n.fileNum > 0) {
          this.$router.push({name: 'realphotogroup', query: {id: n.id, card: n.imei}})
        } else {
          this.$message({
            message: "没有需要鉴定的文件",
            type: 'warning'
          });
        }
      },
      getcameraPage() {
        var vm = this;
        (async function () {
          let res = await http.get(api.infrared.cameraPage, {
            areaId: vm.areaId,
            imei: vm.cardNum,
            wanggeNum: vm.wanggeNum,
            type: "红外相机",
            pageNum: vm.pageNum,
            pageSize: 8
          })
          if (res.data.code == '200') {
            vm.pageList = res.data.data.content;
            vm.totalNumber = res.data.data.totalElements;
          }
        })()
      },
      issurface(p) {
        if (p == null) {
          return "../../static/images/np.jpg"
        } else {
          let iv = p.split('.');
          if (iv[iv.length - 1].toLowerCase() == 'mp4') {
            return "../../static/images/shipin.jpg"
          } else {
            return p;
          }
        }
      }
    },
    beforeRouteLeave(to, from, next) {
      from.meta.keepAlive = false
      next()
    }
  }
</script>
<style scoped>
  @import "../../static/css/realphoto.css";
</style>
